<template>
    <div>
        <div v-if="data1.flag">
            <h2>Vuex 入门学习</h2>
        <hr>
        <h2>count ==== {{count1}} ---{{count2}} --- {{count3}} --- {{count4}} --- {{count5}} --- {{count}}</h2>
        <h2>newCount --- {{newCount}}</h2>
        <h3>city --- {{city1}} - {{city2}}--- {{city}}</h3>
        <h2>msg -- {{msg1}} --- {{msg}}</h2>
        <p>text -- {{text1}} --- {{text}} --- {{text2}}</p>
        <h4>word -- {{data1.word}} --- {{data.word}}</h4>
        </div>
        <hr>
        <button @click="countAdd">count++</button>
        <button @click="changeCount(50)">changeCount 50</button>
        <button @click="changeCity('美丽宜昌')">美丽宜昌</button>
        <button @click="changeMsg('I am fine!')">Msg修改</button>
        <p>
            <input type="text" :value="text" @input='text2($event.target.value)'>
        </p>
        <button @click="changeFlag(!data.flag)">点击切换flag</button>
        <button @click="changeWord('Vuex 学会取值和修改值就够了')">点击修改dataword</button>
    </div>
</template>

<script>
import store from '../store/index'
import {mapState , mapMutations , Getter, mapGetters} from 'vuex'
export default {
    data(){
        return{
            count1:this.$store.state.count,
            city1:this.$store.state.city
        }
    },
    computed:{
        count2(){
            return this.$store.state.count
        },
        city2(){
            return this.$store.state.city
        },
        msg1(){
            return this.$store.state.msg
        },
        text1:{
            get(){
                return this.$store.state.text
            },
            set(v){

            }
        },
        data1(){
            return this.$store.state.data
        },
        ...mapState({ //store.state
            count3:state=>state.count,
            count4:'count' ,// 传字符串参数"count" 等同于'state => state.count'
            count5:(state)=>{
                return state.count
            },   
        }),

        //Vuex的取值方式
        ...mapState([
            'count', //映射this.count 为 store.state.count
            'city',
            'msg',
            'text',
            'data'
        ]),

        ...mapGetters([
            'newCount',
            'text2'
        ])
    },

    methods:{
        // countAdd(){
        //     this.$store.commit('countAdd')
        // },
        // changeCount(n){
        //     this.$store.commit('changeCount',n)
        // },
        // changeCity(city){
        //     this.$store.commit('changeCity',city)
        // },
        // changeMsg(msg){
        //     this.$store.commit('changeMsg',msg)
        // },
        // changeText(text){
        //     this.$store.commit('changeText',text)
        // },
        // changeFlag(flag){
        //     this.$store.commit('changeFlag',flag)
        // },
        // changeWord(word){
        //     this.$store.commit('changeWord',word)
        // },

        ...mapMutations([
            'countAdd',
            'changeCount',
            'changeCity',
            'changeCity',
            'changeMsg',
            'changeText',
            'changeFlag',
            'changeWord'
        ])

    },
    mounted(){
        console.log(this.$store)
    }
}
</script>